<!-- “我的”页面 -->
<script setup lang="ts">
// Assets
import recordPenIcon from '@/static/images/profile/record_pen.png'
import recordIcon from '@/static/images/profile/record.png'
import eduIcon from '@/static/images/profile/edu.png'
import personIcon from '@/static/images/profile/person.png'
import settingsIcon from '@/static/images/profile/settings.png'
import { useUserInfoStore } from '@/store/userInfo'
import { fetchUserInfoAPI } from '@/apis/fetchUserInfo'

const router = useRouter()
const userInfoStore = useUserInfoStore()

// 头像大小
const avatarSize = uni.upx2px(120)

onShow(async () => {
  try {
    const res = await fetchUserInfoAPI(userInfoStore.userInfo!.token!)
    if (res.data?.code === 1)
      userInfoStore.setUserInfo(res.data?.data)
    else
      uni.showToast({ title: res.data?.msg, icon: 'none' })
  }
  catch (err) {
    uni.showToast({ title: JSON.stringify(err), icon: 'none' })
  }
})

/**
 * @description 点击“编辑个人信息”时触发
 */
function handleTapProfileSettings() {
  router.push('profileSettings')
}

/**
 * @description 点击“报名记录”时触发
 */
function handleTapRegistrationRecord() {
  router.push('registrationRecord')
}

/**
 * @description 点击“参与班级”时触发
 */
function handleTapMyClasses() {
  router.push('myClasses')
}

/**
 * @description 点击“管理者”时触发
 */
function handleTapManager() {
  if (userInfoStore.userInfo?.is_manage)
    router.push('manager')
  else
    uni.showToast({ title: '您没有权限', icon: 'error' })
}

/**
 * @description 点击“退出登录”时触发
 */
function handleTapLogout() {
  uni.showModal({
    title: '确定要退出登录吗？',
    confirmColor: '#0037AE',
    success: (result) => {
      if (result.confirm) {
        userInfoStore.$reset()
        router.replaceAll('index')
      }
    },
  })
}
</script>

<template>
  <view class="absolute left-0 top-0 h-364rpx w-screen bg-#0037AE" />
  <view class="relative z-1">
    <Spacer height="60" />
    <!-- Profile START -->
    <view class="mx-40rpx flex items-center">
      <uv-avatar :src="userInfoStore.userInfo?.avatar" :size="avatarSize" />
      <Spacer width="20" />
      <view>
        <view class="text-28rpx text-white leading-40rpx">
          {{ userInfoStore.userInfo?.username }}
        </view>
        <Spacer height="4" />
        <view class="text-24rpx text-white leading-32rpx">
          {{ userInfoStore.userInfo?.duties }}
        </view>
      </view>
    </view>
    <!-- Profile END -->
    <Spacer height="52" />
    <!-- 列表 START -->
    <view class="overflow-hidden rounded-20rpx bg-white card-shadow">
      <ProfileListCell :icon="recordPenIcon" label="编辑个人信息" @tap="handleTapProfileSettings" />
      <Divider />
      <ProfileListCell :icon="recordIcon" label="我的报名记录" @tap="handleTapRegistrationRecord" />
      <Divider />
      <ProfileListCell :icon="eduIcon" label="参与班级" @tap="handleTapMyClasses" />
      <Divider />
      <ProfileListCell :icon="personIcon" label="管理者" @tap="handleTapManager" />
      <Divider />
      <ProfileListCell :icon="settingsIcon" label="退出登录" @tap="handleTapLogout" />
    </view>
    <!-- 列表 END -->
  </view>
</template>

<route lang="yaml">
name: 'profile'
style:
  navigationBarBackgroundColor: '#0037AE'
  navigationBarTitleText: '个人中心'
  navigationBarTextStyle: 'white'
</route>
